<template>
  <div>
    <div style="text-align:left;padding:10px">
        <el-button size="mini" icon="el-icon-back" @click="goBack"></el-button>
    </div>
    <Row>
      <Col :sm="{span:12,offset:6}" :md="{span:14,offset:5}" :lg="{span:10,offset:7}">
        <div style="padding:20px">
          <el-card>
            <div slot="header">
              <h2>
                <i class="el-icon-s-management"></i>
                {{ title }}
              </h2>
            </div>
            <div style="margin-top:20px">
              <el-form :rules="rules" label-position="top" ref="userData" :model="userData" status-icon label-width="100px" style="text-align:left">
                    <el-form-item label="原密码" prop="oldPass">
                        <el-input type="password" :clearable="true" :show-password="true"
                         v-model="userData.oldPass" maxlength=20 show-word-limit placeholder="请输入原密码"></el-input>
                    </el-form-item>
                    <el-form-item label="新密码" prop="newPass">
                        <el-input type="password" :clearable="true" :show-password="true"
                         v-model="userData.newPass" maxlength=20 show-word-limit placeholder="请输入新密码"></el-input>
                    </el-form-item>
                    <el-form-item label="确认密码" prop="checkPass">
                        <el-input type="password" :clearable="true" :show-password="true"
                         v-model="userData.checkPass" maxlength=20 show-word-limit placeholder="请确认新密码"></el-input>
                    </el-form-item>
                </el-form>
                <el-button size="small" plain @click="updatePass('userData')">确认保存</el-button>
            </div>
          </el-card>
        </div>
      </Col>
    </Row>
  </div>
</template>

<script>
export default {
  name: 'EditorPass',
  data () {
    let checkPass = (rule, value, callback) => {
      if (value === '') {
        callback(new Error('请再次输入密码'))
      } else if (value !== this.userData.newPass) {
        callback(new Error('两次输入的密码不一致'))
      } else {
        callback()
      }
    }
    return {
      title: '密码修改',
      userData: {
        oldPass: '',
        newPass: '',
        checkPass: ''
      },
      rules: {
        oldPass: [
          { required: true, message: '请输入原密码', trigger: 'blur' },
          { max: 20, message: '最大不可超过20个字符', trigger: 'blur' }
        ],
        newPass: [
          { required: true, message: '请输入新密码', trigger: 'blur' },
          { max: 20, message: '最大不可超过20个字符', trigger: 'blur' }
        ],
        checkPass: [
          { required: true, trigger: 'blur', validator: checkPass }
        ]
      }
    }
  },
  methods: {
    goBack () {
      this.lseutil.goBack()
    },
    updatePass (formName) {
      this.$refs[formName].validate((value) => {
        if (value) {
          let loading = this.lseutil.loading('正在修改密码')
          this.lseajax.post(this.lseajax.baseurl + '/api/userInfo/updatePass', {
            old: this.userData.oldPass,
            new: this.userData.newPass
          }).then((data) => {
            if (data.code === 200) {
              this.lseutil.msg({
                msg: data.msg
              })
            } else {
              this.lseutil.msg({
                msg: data.msg
              })
            }
            loading.close()
          }).catch(res => {
            loading.close()
          })
        }
      })
    }
  },
  created () {
  }
}
</script>

<style scoped>
</style>
